<!-- # CE - camunda-bpm-webapp/ui/admin/client/scripts/pages/setup.html -->
<section>
  <!-- <aside></aside> -->
  <div class="section-content"
       id="users"
       ng-switch on="created">
    <header class="row">
      <div class="col-xs-8">
        <h3>{{ 'SETUP_SETUP' | translate }}</h3>
      </div>
      <div class="col-xs-4 text-right">
      </div>
    </header>

    <div class="row"
         ng-switch-when="true">
      <div class="col-md-12">

        <div uib-alert class="alert alert-success">
          <strong>{{ 'SETUP_USER_CREATED' | translate }}</strong>
          {{ 'SETUP_USER_INITIAL' | translate }}
        </div>

        {{ 'SETUP_USER_REDIRECT_1' | translate }} <a href="./#/login">{{ 'SETUP_USER_REDIRECT_2' | translate }}</a> {{ 'SETUP_USER_REDIRECT_3' | translate }}
      </div>
    </div>

    <div class="row"
         ng-switch-when="false">
      <div class="col-md-8 box">

        <div notifications-panel
             class="notifications-panel"></div>

        <form class="form-horizontal"
              name="createUserForm">
          <div class="h4">{{ 'SETUP_USER_ACCOUNT' | translate }}</div>

          <div class="form-group">
            <label class="control-label col-sm-4"
                   for="inputUserId">{{ 'SETUP_USER_ID' | translate }}</label>

            <div class="col-sm-8">
              <input id="inputUserId"
                     name="userId"
                     class="form-control"
                     type="text"
                     ng-model="profile.id"
                     novalidate required></input>

              <span class="help-inline"
                    ng-show="createUserForm.userId.$error.required">
                {{ 'SETUP_USER_ID_REQUIRED' | translate }}
              </span>
            </div>
          </div>

          <div class="form-group">
            <label class="control-label col-sm-4"
                   for="inputPassword">{{ 'SETUP_USER_PASSWORD' | translate }}</label>

            <div class="col-sm-8">
              <div cam-widget-password
                   cam-widget-password-profile="profile"
                   cam-widget-password-password="credentials.password"
                   cam-widget-password-valid="credentials.valid"></div>

              <span class="help-inline"
                    ng-show="createUserForm.inputPassword.$error.password">
                {{ 'SETUP_USER_PASSWORD_LENGTH' | translate }}
              </span>
              <span class="help-inline"
                    ng-show="createUserForm.inputPassword.$error.required">
                {{ 'SETUP_USER_PASSWORD_REQUIRED' | translate }}
              </span>
            </div>
          </div>

          <div class="form-group">
            <label class="control-label col-sm-4"
                   for="inputPasswordRepeat">{{ 'SETUP_USER_PASSWORD_REPEAT' | translate }}</label>

            <div class="col-sm-8">
              <input id="inputPasswordRepeat"
                  name="inputPasswordRepeat"
                  class="form-control"
                  type="password"
                  ng-model="credentials.password2"
                  data-password-repeat="credentials.password"></input>

              <span class="help-inline"
                    ng-show="createUserForm.inputPasswordRepeat.$error.passwordRepeat">
                {{ 'SETUP_USER_PASSWORD_MUST_MATCH' | translate }}
              </span>
            </div>
          </div>

          <div class="h4">{{ 'SETUP_USER_PROFILE' | translate }}</div>

          <div class="form-group">
            <label class="control-label col-sm-4"
                for="inputFirstname">{{ 'SETUP_USER_FIRSTNAME' | translate }}</label>

            <div class="col-sm-8">
              <input id="inputFirstname"
                     name="firstname"
                     type="text"
                     class="form-control"
                     ng-model="profile.firstName"
                     novalidate
                     required></input>

              <span class="help-inline text-danger"
                    ng-show="createUserForm.firstname.$error.required">
                {{ 'SETUP_USER_FIRSTNAME_REQUIRED' | translate }}
              </span>
            </div>
          </div>

          <div class="form-group">
            <label class="control-label col-sm-4"
                for="inputLastname">{{ 'SETUP_USER_LASTNAME' | translate }}</label>

            <div class="col-sm-8">
              <input id="inputLastname"
                  type="text"
                  class="form-control"
                  ng-model="profile.lastName"
                  novalidate
                  required></input>

              <span class="help-inline"
                    ng-show="createUserForm.firstname.$error.required">
                {{ 'SETUP_USER_LASTNAME_REQUIRED' | translate }}
              </span>
            </div>
          </div>

          <div class="form-group">
            <label class="control-label col-sm-4"
                for="inputEmail">{{ 'SETUP_USER_EMAIL' | translate }}</label>

            <div class="col-sm-8">
              <input id="inputEmail"
                  name="email"
                  type="text"
                  class="form-control"
                  ng-model="profile.email"
                  data-email></input>

              <span class="help-inline"
                    ng-show="createUserForm.email.$error.email">
                {{ 'SETUP_USER_EMAIL_NOT_VALID' | translate }}
              </span>
            </div>
          </div>

          <div class="form-group">
            <div class="col-sm-8 col-sm-offset-4">
              <button type="submit"
                      class="btn btn-primary"
                      ng-disabled="!createUserForm.$valid || !credentials.valid"
                      ng-click="createUser()">{{ 'SETUP_USER_NEW_USER' | translate }}</button>
            </div>
          </div>

        </form>
      </div>

      <div class="col-md-4">
        <div class="well">
          <div class="h4">{{ 'SETUP_USER_MESSAGE_1' | translate }}</div>
          <p>{{ 'SETUP_USER_MESSAGE_2' | translate }}<strong>{{ engineName }}</strong>
          {{ 'SETUP_USER_MESSAGE_3' | translate }}
          {{ 'SETUP_USER_MESSAGE_4' | translate }}</p>
          <p>
            <a href="https://docs.camunda.org/manual/installation/"
               class="btn btn-success">
              {{ 'SETUP_USER_MESSAGE_5' | translate }}
            </a>
          </p>
        </div>
        </div>
    </div>
  </div>
</section>
<!-- / CE - camunda-bpm-webapp/ui/admin/client/scripts/pages/setup.html -->
